<template>
	<view class="balance">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title" :dark="dark"></public-header>
		<view class="hei_100"></view>
		<!-- #endif -->
		<!-- end -->
		<view class="xian-gray16"></view>
		<view class="line" @click="panduan='wxpay'">
			<image class="image fl" src="../../../static/images/wx.png"></image>
			<view class="label fl">微信</view>
			<image v-show="panduan=='wxpay'" class="icon fr" src="../../../static/images/selected.png"></image>
		</view>
		
		<view class="xian-gray16"></view>
		<view class="line" @click="panduan='ban'" v-if="type!='充值'">
			<image class="image fl" src="../../../static/images/baby.png"></image>
			<view class="label fl">余额</view>
			<image v-show="panduan=='ban'" class="icon fr" src="../../../static/images/selected.png"></image>
		</view>
		
		<view class="xian-gray16"></view>
		<view class="line">
			<view class="text">{{title}}金额<text style="color: red;" v-if="money>0&&money>value">充值金额低于{{money}}无法获得优惠券</text></view>
			<view class="line1">
				<text class="fl">￥</text><input :disabled="type=='预付款'" type="digit" v-model="value" class="input" placeholder="请输入金额"/>
			</view>
		</view>
		<view class="xian-gray16"></view>
		<view class="details-bottom">
			<!-- <view class="but-error" @click="submit()">充值</view> -->
			<button class="wxlogin" open-type="getUserInfo"  @getuserinfo="bindGetUserInfo()">确认</button>
		</view>
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import { mapState, mapMutations } from 'vuex';
	export default {
		computed: mapState(['hasLogin', 'uerInfo']),
		components: {
			PublicHeader
		},
		data() {
			return {
				title:'充值',
				dark :true,
				panduan: 'wxpay',
				id: '',
				money: '',
				type: '充值',
				value: '',
				couponsId: '',
				usedBrokerage: '',
				usedBalances: '',
				orderId:''
			}
		},
		onLoad(option) {
			console.log(option,"===mon")
			if (option.type == '活动') {
				this.type = option.type
				this.money = option.money
				this.value = option.money
				this.id = option.activityId
			}
			if (option.type == '预付款') {
				this.type = option.type
				this.money = option.money
				this.value = option.money
				this.id = option.orderId
				this.couponsId = option.couponsId
				this.usedBalances = option.usedBalances
				this.title = '付款'
			}
			if (option.type == '买套餐') {
				this.type = option.type
				this.money = option.money
				this.value = option.money
				this.id = option.id
				this.usedBrokerage = option.usedBrokerage
				this.usedBalances = option.usedBalances
				this.title = '付款'
			}
			if (option.type == '尾款支付') {
				this.type = option.type
				this.orderId = option.orderId
				this.value = option.money
				this.couponsId = option.couponsId
				this.usedBalances = option.money
				this.title = '付款'
			}
		},
		methods: {
			bindGetUserInfo(e) {
				// #ifdef MP-WEIXIN
				if (this.value < 0) {
					uni.showToast({title:"金额不能小于0",icon:"none"})
					return
				}
				// if (this.money > 0 && this.value < this.money) {
				// 	uni.showToast({title:'充值金额低于' + this.money + '无法获得优惠券',icon:"none"})
				// 	return
				// }
				let _this = this
				uni.getProvider({
				  service: 'oauth',
				  success: function (res) {
					if (~res.provider.indexOf('weixin')) {
						uni.login({
							provider: 'weixin',
							success: (loginRes) => {
								uni.getUserInfo({
									provider: 'weixin',
									success: (info) => {//这里请求接口
										console.log('用户信息:',info)
										console.log('微信code:',loginRes)
										_this.submit(loginRes) 
									},
									fail: () => {
										uni.showToast({title:"微信登录授权失败",icon:"none"});
									}
								})
							},
							fail: () => {
								uni.showToast({title:"微信登录授权失败",icon:"none"});
							}
						})
					}else{
						uni.showToast({
							title: '请先安装微信或升级版本',
							icon:"none"
						});
					}
				  }
				});
				//#endif
			},
			submit(loginRes) {
				let _this = this
				// uni.login({
				//   provider: 'weixin',
				//   success: function (loginRes) {
					_this.$http.get('/WeChat/MiniProgram/get/Access/Key/' + loginRes.code, {
						appid: 'wx74c82575ffce4b03',
						secret:'3a929a22d8977914f8f5029d4d14726f'
					}).
					then(function (res) {
						console.log('openid', res)
						
						if (_this.type=='充值'||_this.type=='活动') {
							_this.$http.post('/order/topupbalances/' + _this.panduan,{
								appid: 'wx74c82575ffce4b03',
								userid: _this.uerInfo.userId,
								paycash: _this.value,
								activityId: _this.money>0&&_this.value>=_this.money?_this.id:'',
								openId: res.data.openid,
							}).
							then(function (response) {
								if (response.success) {
									console.log('支付', res)
									_this.paymini(response.data)
								}
							}).catch(function (error) {
								console.log(error);
							});
						} else if (_this.type=='预付款') {
							if (_this.panduan == 'wxpay') {
								_this.$http.post('/user/order/payorder/'+_this.panduan,{
									orderId:_this.id,
									openId: res.data.openid,
									cashWaitPay:_this.value||0,
									couponsId:_this.couponsId,
									usedBrokerage:_this.usedBrokerage,
									usedBalances:_this.usedBalances
								}).
								then(function (val) {
									if (val.success) {
										_this.paymini(val.data)
									} else {
										uni.showToast({
											title: val.msg,
											icon:"none"
										})
									}
								}).catch(function (error) {
									console.log(error);
								});
							}else if (_this.panduan == 'ban'){
								_this.$http.post('/user/order/payorder/'+_this.panduan,{
									orderId:_this.id,
									couponsId:_this.couponsId,
									usedBalances:_this.money
								}).
								then(function (val) {
									if (val.success) {
										_this.pay(val.data)
									} else {
										uni.showToast({
											title: val.msg,
											icon:"none"
										})
									}
								}).catch(function (error) {
									console.log(error);
								});
							}
						} else if (_this.type=='买套餐') {
							_this.$http.post('/package/purchasepacakge/'+_this.panduan,{
								userId:_this.uerInfo.userId,
								id:_this.id,
								payPrice: _this.value||0,
								usedBalances:_this.usedBalances,
								usedBrokerage:_this.usedBalances
							}).
							then(function (val) {
								if (val.success) {
									_this.paymini(val.data)
								} else {
									uni.showToast({
										title: val.msg,
										icon:"none"
									})
								}
							}).catch(function (error) {
								console.log(error);
							});
						}
						else if (_this.type=='尾款支付') {
							if (_this.panduan == 'wxpay') {
								console.log("微信支付")
								_this.$http.post('/user/order/payorder/wxpay',{
									orderId:_this.orderId,
									couponsId:_this.couponsId ||0,
									cashWaitPay:_this.value||0,
								}).
								then(function (val) {
									if (val.success) {
										_this.paymini(val.data)
									} else {
										uni.showToast({
											title: val.msg,
											icon:"none"
										})
									}
								}).catch(function (error) {
									console.log(error);
								});
							} else if (_this.panduan == 'ban'){
								console.log("余额支付")
								_this.$http.post('/user/order/payorder/ban',{
									orderId:_this.orderId,
									couponsId:_this.couponsId ||0,
									usedBalances:_this.usedBalances
								}).
								then(function (val) {
									if (val.success) {
											_this.pay(val.data)
											
									} else {
										uni.showToast({
											title: val.msg,
											icon:"none"
										})
									}
								}).catch(function (error) {
									console.log(error);
								});
							}
						}
					}).catch(function (error) {
						console.log(error);
					});
				  // }
				// });
			},
			paymini(str) {
				let _this = this
				let query = str
				let title = '充值'
				if (_this.type=='预付款') {
					title = '付款'
				}
				if (_this.type=='尾款支付') {
					title = '付款'
				}
				if (_this.type=='买套餐') {
					title = '付款'
				}
				uni.requestPayment({
					provider: 'wxpay',
					appId: 'wx74c82575ffce4b03',
					timeStamp: query.timeStamp,
					nonceStr: query.nonceStr,
					package: query.package,
					signType: query.signType,
					paySign: query.paySign,
					
					success: (val) => {
						// uni.requestSubscribeMessage({
						// 	tmplIds: ['AqehYpGhzUSTjNCp7lr9owJQt0K9PvZE3Ayke_O6uEo', 'SB5tr6mcmw2mqqxabYG0hR4tEaEC4wsJ_XpAYFriE1Y'],
						// 	success(res) {
						// 		console.log(res)
						// 		uni.showToast({
						// 			title: title + '成功',
						// 			icon:"none"
						// 		})
						// 		setTimeout(function() {
						// 			_this.$Router.back()
						// 		}, 1000);
						// 	},
						// 	fail(res) {
						// 		console.log(res)
						// 	},
						// })
						uni.showToast({
							title: val.msg,
							icon:"none"
						})
						setTimeout(function() {
							_this.$Router.back()
						}, 1000);
					},
					fail: (val) => {
						uni.showToast({
							title: title + '失败，请稍后再试。',
							icon:"none"
						})
					},
				})
			},
			
			pay(str) {
				console.log(JSON.parse(str))
				uni.requestPayment({
					provider: ban,
					orderInfo: JSON.parse(str),
					timeStamp: '',
					nonceStr: '',
					package: '',
					signType: '',
					paySign: '',
					success: (val) => {
						uni.showToast({
							title: val.msg,
							icon:"none"
						})
						console.log(val)
					},
					fail: (val) => {
						console.log(JSON.parse(str))
						console.log(val)
					},
					complete: (val) => {
						console.log(val)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	/* background-color: #F9FAFB; */
}
.line{
	width: 100%;
	min-height: 100rpx;
	line-height: 100rpx;
	overflow: hidden;
}
.line1{
	margin-left: 34rpx;
	width: 100%;
	min-height: 80rpx;
	line-height: 80rpx;
	overflow: hidden;
}
.image{
	margin-top: 20rpx;
	margin-left: 34rpx;
	margin-right: 20rpx;
	width: 60rpx;
	height: 60rpx;
}
.label{
	font-size:28rpx;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(51,51,51,1);
	height:100rpx;
}
.icon{
	margin-top: 36rpx;
	margin-right: 32rpx;
	width: 30rpx;
	height: 30rpx;
}
.text{
	margin-left: 34rpx;
	font-size: 24rpx;
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
}
.input{
	float: left;
	height: 80rpx;
	width: 600rpx;
}
.details-bottom {
	width: 100%;
	margin-top: 100rpx;
	margin-bottom: 22rpx;
	position: absolute;
	bottom: 0;
}
.but-error {
	width: 91.4%;
	margin-left: 4.3%;
	height: 100rpx;
	background:rgba(87,191,255,1);
	box-shadow:0px 6px 20px 0px rgba(87,191,255,0.5);
	border-radius:10rpx;
	font-size:36rpx;
	font-family:PingFangSC-Medium,PingFang SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
